// webpack.config.js
require('dotenv').config();

// const cdn_worker = require('./conf/cdn-worker');
// const test_conf = require('./conf/test_conf');
const env_define = require('./conf/env_define');
const webpack = require('webpack');

const path = require('path');
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackCdnPlugin = require('webpack-cdn-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const APP_PATH = path.resolve(__dirname, 'src'); //源文件目录
// const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');

module.exports = (env, argv) => {
    let cdn_modules = {
        'react': [
            {name: 'react', var: 'React', path: `umd/react.${argv.mode}.min.js`},
            {name: 'react-dom', var: 'ReactDOM', path: `umd/react-dom.${argv.mode}.min.js`},
            //{name: 'react-router', var: 'ReactRouter', path: 'umd/react-router.min.js'},
            {name: 'react-router-dom', var: 'ReactRouterDOM', path: 'umd/react-router-dom.min.js'},

            // for antd
            {name: 'moment', path: 'moment.js'},
            {name: 'antd', var: 'antd', path: 'dist/antd.min.js'},
            {name: 'antd', cssOnly: true, style: 'dist/antd.min.css'},    // 有用的

            {name: 'redux', var: 'Redux', path: `dist/redux.${argv.mode === 'production' ? 'min.js' : 'js'}`},
            //{name: 'redux-thunk', var: 'ReduxThunk', path: `dist/redux-thunk.${options.mode === 'production' ? 'min.js' : 'js'}`},
            {name: 'react-redux', var: 'ReactRedux', path: `dist/react-redux.${argv.mode === 'production' ? 'min.js' : 'js'}`},

            // for react-bootstrap
            // {name: 'jquery', var: 'jQuery', path: 'dist/jquery.slim.min.js'},
            // {name: 'popper.js', path: 'dist/umd/popper.min.js'},
            // {name: 'bootstrap', path: 'dist/js/bootstrap.bundle.min.js'},                      // 有用的      // bootstrap.bundle.js { Popper }  bootstrap.js { Not included }
            // {name: 'bootstrap', cssOnly: true, style: 'dist/css/bootstrap.min.css'},    // 有用的
            // {name: 'react-bootstrap',  var: 'ReactBootstrap', path: `dist/react-bootstrap.min.js`},

        ]
    };
    let config = {
        output:
            {
                filename: '[name].bundle.js',
                path:
                    path.resolve(__dirname, 'dist')
            },
        entry: './src/index.js',
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    use: 'babel-loader',
                    exclude: /node_modules/,
                    include: APP_PATH
                },
                {
                    test: /\.css$/,
                    use: [MiniCssExtractPlugin.loader, 'css-loader']
                }
            ]
        },
        plugins: [
            // 这款插件用于压缩 JS 代码，减少资源体积大小
            new HtmlWebpackPlugin({
                cdnModule: 'react',
                template: 'index.html', // 添加模版文件
                favicon: './favicon.ico',
            }),
            new WebpackCdnPlugin(
                {
                    modules: cdn_modules
                }
            ),
            new MiniCssExtractPlugin({
                filename: './css/[name].css'
            }),
            new webpack.HotModuleReplacementPlugin(),
            // new BundleAnalyzerPlugin({
            //     analyzerHost:'127.0.0.1',
            //     analyzerPort: 8889
            // }),
            // new DynamicCdnWebpackPlugin(),

        ],
        // mode: 'production',
        // externals: {
        //     // bootstrap: 'bootstrap',
        //     // 'react-bootstrap': 'react-bootstrap'
        // },
        // devtool: undefined, //source_map,
        resolve: {
            extensions: [".js", ".jsx"]
        },
        devServer: {
            port: 3001,
            // 声明为热替换
            hot: true,
            // 第一次打包时打开浏览器
            // open: true,
            contentBase: './dist',
            open: 'chrome',
            historyApiFallback: true,
            // Hello browser application name is platform dependent.
            // Don't hard code it in reusable modules. For example,
            // 'Chrome' is 'Google Chrome' on macOS,
            // 'google-chrome' on Linux and 'chrome' on Windows.
        }
    };
    env_define.env_define(env, argv, config, cdn_modules);
    return config;
};

// if (process.env.isProduction === 'true') {
//     module.exports.plugins.push(
//         new UglifyJsPlugin({
//             test: /\.js(\?.*)?$/i,
//         })
//     );
// }